<template>
  <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      class="demo-ruleForm"
  >
    <el-form-item label="" prop="name">
      <el-input v-model="ruleForm.name" placeholder="请输入邮箱"></el-input>
    </el-form-item>
    <el-form-item label="" prop="password">
      <el-input v-model="ruleForm.password" placeholder="请输入密码"></el-input>
    </el-form-item>
    <el-form-item label="" prop="confirmPassword">
      <el-input v-model="ruleForm.confirmPassword" placeholder="确认密码"></el-input>
    </el-form-item>
    <el-form-item>
      <div class="btnDiv">
        <custom-btn type="success" @click="submitForm($event,'ruleForm')">注册</custom-btn>
        <div style="float: right;">
          <router-link class="link-type" :to="'/login'">马上登录</router-link>
        </div>
      </div>
    </el-form-item>
  </el-form>
</template>

<script>
import customBtn from "@/components/customBtn/customBtn";
export default {
  components:{
    customBtn
  },
  data() {
    return {
      ruleForm: {
        name: '',
        password:'',
        confirmPassword:'',
        rememberMe:false
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入邮箱',
            trigger: 'blur',
          },
          {
            type: 'email',
            message: '邮箱格式不正确',
            trigger: ['blur', 'change'],
          },
        ],
        password:[
          {
            required: true,
            message: '请输入邮箱',
            trigger: 'blur',
          },
        ]
      },
    }
  },
  methods: {
    submitForm(e,formName) {
      console.log('e',e)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
  },
}
</script>

<style scoped lang="scss">
.btnDiv{
  display: flex;
  flex-direction: column;
  align-items: center;
  .link-type{
    color: #ffffff;
  }
}
.rememberPWD{
  color: #ffffff;
  //margin: 0;
}
</style>
